import React, { useState, useEffect } from 'react';
import { Input, Select, Checkbox, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import DataTypeSelect from './DataTypeSelect';

const columns = [
  { name: '参数编码', prop: 'paramKey' },
  { name: '参数名称', prop: 'paramName' },
  { name: '参数位置', prop: 'paramPosition' },
  { name: '数据类型', prop: 'dataType' },
  { name: '必填', prop: 'required' },
  { name: '描述', prop: 'paramDesc' },
];

const ParamSetting = styled.div`
  width: 100%;
`;

const ParamSettingHead = styled.div`
  background-color: #002f5c;
  padding: 0 1px;
  color: #9ccdff;
`;

const ParamSettingBody = styled.div`
  /* border-left: 1px solid #f2f2f2; */
  /* border-right: 1px solid #f2f2f2; */
`;

const ParamSettingTr = styled.div`
  display: flex;
  /* border-bottom: 1px solid #f2f2f2; */
  height: 36px;
`;

const ParamSettingTd = styled.div`
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  align-items: center;

  &.delete-td,
  &.required-td {
    width: 40px;
    flex: none;
    justify-content: center;
  }

  &.delete-td {
    width: 20px;
    margin-right: 10px;
    & > .anticon {
      cursor: pointer;
      color: #999;
    }
  }
`;

const ParamSettingFoot = styled.div`
  text-align: center;
  padding: 6px 0;
`;

const ParamSettingComponent = ({
  value,
  onChange,
  showRequired = false,
  showParamPosition = false,
  dataTypeClassify,
  addText,
}) => {
  const [params, setParams] = useState([...(value || [])]);

  useEffect(() => {
    if (value !== params) {
      setParams([...(value || [])]);
    }
  }, [value]);

  const addParam = () => {
    const newParams = [
      ...params,
      {
        paramKey: '',
        paramName: '',
        paramPosition: '',
        dataType: { type: 'String', itemType: null, objectKey: null, objectStructure: null },
        required: false,
        paramDesc: '',
      },
    ];
    setParams(newParams);
    onChange?.(newParams);
  };

  const removeParam = (rowIndex) => {
    const newParams = [...params];
    newParams.splice(rowIndex, 1);
    setParams(newParams);
    onChange?.(newParams);
  };

  const handleParamChange = (rowIndex, field, value) => {
    const newParams = [...params];
    newParams[rowIndex][field] = value;
    setParams(newParams);
    onChange?.(newParams);
  };

  return (
    <ParamSetting>
      <ParamSettingHead>
        <ParamSettingTr>
          {columns.map(column => {
            if (column.prop === 'paramPosition' && !showParamPosition) return null;
            if (column.prop === 'required' && !showRequired) return null;
            return (
              <ParamSettingTd
                key={column.prop}
                className={column.prop === 'required' ? 'required-td' : ''}
              >
                {column.name}
              </ParamSettingTd>
            );
          })}
          <ParamSettingTd className="delete-td" />
        </ParamSettingTr>
      </ParamSettingHead>
      <ParamSettingBody>
        {params.map((param, rowIndex) => (
          <ParamSettingTr key={rowIndex}>
            {columns.map(column => {
              if (column.prop === 'paramPosition' && !showParamPosition) return null;
              if (column.prop === 'required' && !showRequired) return null;

              if (column.prop === 'paramKey') {
                return (
                  <ParamSettingTd key={column.prop}>
                    <Input
                      value={param.paramKey}
                      size="small"
                      onChange={(e) => handleParamChange(rowIndex, 'paramKey', e.target.value)}
                    />
                  </ParamSettingTd>
                );
              }
              if (column.prop === 'paramName') {
                return (
                  <ParamSettingTd key={column.prop}>
                    <Input
                      value={param.paramName}
                      size="small"
                      onChange={(e) => handleParamChange(rowIndex, 'paramName', e.target.value)}
                    />
                  </ParamSettingTd>
                );
              }
              if (column.prop === 'paramPosition') {
                return (
                  <ParamSettingTd key={column.prop}>
                    <Select
                      value={param.paramPosition}
                      size="small"
                      onChange={(value) => handleParamChange(rowIndex, 'paramPosition', value)}
                      style={{ width: '100%' }}
                    >
                      <Select.Option value="path">path</Select.Option>
                      <Select.Option value="query">query</Select.Option>
                      <Select.Option value="body">body</Select.Option>
                    </Select>
                  </ParamSettingTd>
                );
              }
              if (column.prop === 'dataType') {
                return (
                  <ParamSettingTd key={column.prop}>
                    <DataTypeSelect
                      value={param.dataType}
                      type={dataTypeClassify}
                      size="small"
                      onChange={(value) => handleParamChange(rowIndex, 'dataType', value)}
                    />
                  </ParamSettingTd>
                );
              }
              if (column.prop === 'required') {
                return (
                  <ParamSettingTd key={column.prop} className="required-td">
                    <Checkbox
                      checked={param.required}
                      onChange={(e) => handleParamChange(rowIndex, 'required', e.target.checked)}
                    />
                  </ParamSettingTd>
                );
              }
              if (column.prop === 'paramDesc') {
                return (
                  <ParamSettingTd key={column.prop}>
                    <Input
                      value={param.paramDesc}
                      size="small"
                      onChange={(e) => handleParamChange(rowIndex, 'paramDesc', e.target.value)}
                    />
                  </ParamSettingTd>
                );
              }
              return null;
            })}
            <ParamSettingTd className="delete-td">
              <DeleteOutlined onClick={() => removeParam(rowIndex)} />
            </ParamSettingTd>
          </ParamSettingTr>
        ))}
      </ParamSettingBody>
      <ParamSettingFoot>
        <Button size="small" type="primary" onClick={addParam}>
          {addText || '新增入参'}
        </Button>
      </ParamSettingFoot>
    </ParamSetting>
  );
};

export default ParamSettingComponent; 